<template>
    <div class="nav-bar">
        <ul class="list">
            <li>
                <a href="#" data-url="home" @click="jump">
                    <img v-if="flag=='home'" src="@/assets/img/navbar01_active.png" alt />
                    <img v-else src="@/assets/img/navbar01.png" alt />
                </a>
            </li>
            <li>
                <a href="#" data-url="category" @click="jump">
                    <img v-if="flag=='category'" src="@/assets/img/navbar02_active.png" alt />
                    <img v-else src="@/assets/img/navbar02.png" alt />
                </a>
            </li>
            <li>
                <a href="#" data-url="cart" @click="jump">
                    <img v-if="flag=='cart'" src="@/assets/img/navbar03_active.png" alt />
                    <img v-else src="@/assets/img/navbar03.png" alt />
                </a>
            </li>
            <li>
                <a href="#" data-url="login" @click="jump">
                    <img v-if="flag=='login'" src="@/assets/img/navbar04.png" alt />
                    <img v-else src="@/assets/img/navbar04.png" alt />
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "NavBar",
    props: {
        flag: {
            type: String
        }
    },
    data() {
        return {};
    },
    computed: {
        ...mapState("bar", {
            srcpath: state => state.srcpath
        })
        // srcpath() {
        //     return this.$store.state.bar.srcpath;
        // }
    },
    methods: {
        jump(e) {
            // console.log(e.currentTarget.dataset.url)
            let { url } = e.currentTarget.dataset;
            console.log(url);
            this.$router.push({ name: url });
            // this.$store.dispatch("bar/handleSrc", src, { root: true });
        }
    }
};
</script>

<style lang="scss">
.nav-bar {
    position: fixed;
    width: 100%;
    height: 54px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    background-color: #fff;
    .list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        padding-top: 5px;
        li {
            flex:1;
            a {
                display: flex;
                // flex-direction: column;
                justify-content: center;
                align-items: center;
                text-decoration: none;
                img {
                    width: 60px;
                }
            }
        }
    }
}
</style>
